<template>
	<section id="navBottom">
		<ul class="navBottom_list">
			<li v-for="(item,index) in list" :key="index" class="navBottom_li" @click="toColor(index)">
				<router-link class="tab-item-a" :to="item.path">
					<img :src="index == curom ? item.ImgRed : item.Img"/>
					<span :class="{navbottomColor:index===curom}">{{item.text}}</span>
				</router-link>
			</li>
		</ul>
		
	</section>
</template>

<script>
	export default {
		data() {
			return {
					curom:0,
					list:[
						{
							path:'/home',
							Img:'../asserts/images/home.png',
							ImgRed:'../asserts/images/homeImg.png',
							text:'首页'
						},
						{
							path:'/video',
							Img:'../asserts/images/video.png',
							ImgRed:'../asserts/images/videoImg.png',
							text:'视频'
						},
						{
							path:'/smallVideo',
							Img:'../asserts/images/modile.png',
							ImgRed:'../asserts/images/modileImg.png',
							text:'小视频'
						},
						{
							path:'/redPacket',
							Img:'../asserts/images/paper.png',
							ImgRed:'../asserts/images/paperImg.png',
							text:'红包'
						},
						{
							path:'/mine',
							Img:'../asserts/images/login.png',
							ImgRed:'../asserts/images/loginImg.png',
							text:'我的'
						}
					]
			};
		},
		components: {
		
		},
		methods: {
			toColor:function(index){
				this.curom=index;
				console.log(this.curom)
			}
		},
		mounted() {
		},
		computed: {

		}
	};
</script>
<style scoped lang="scss">
	@import "@/asserts/styles/bottom/navBottom.scss";
	.navbottomColor{
		color:#b70c0c !important;
	}
</style>
